<template>
	<view class="cart">
		<view class="top">
			<image class="banner" src="../../static/bg.svg" mode="aspectFill"></image>
			<text class="shop-name">成飞餐厅</text>
		</view>
		<view class="left">
			<view class="left-top">
				<text class="count-total">已选购<text class="count-total-number">{{cartList.length}}</text>件</text>
				<text class="select-all" @click="cartSelectAll()">{{cartSelectAllStatus ? '全不选' : '全选'}}</text>
				<view class="delete-box" @click="clearCart()">
					<image class="icon" src="../../static/delete.svg" mode="aspectFit"></image>
					<text>清空</text>
				</view>
			</view>
			<view class="left-list">
				<select-food v-for="(item, index) in cartList" :key="index" :item="item" :popup="$refs['food-popup']"
					:cart="this" />
				<view class="left-list-empty" v-if="!cartList.length">
					<image src="../../static/empty-data.svg" mode=""></image>
				</view>
			</view>
			<text class="price-total"> ¥ {{priceTotal}}</text>
			<view class="check" @click="toPay()">
				<text>立即结账</text>
			</view>
		</view>
		<view class="search-bar">
			<picker class="search-type" mode="selector" :range="type" range-key="name" :value="typeIndex"
				@change="searchTypePickerChange">
				<view class="search-type-inner">
					<text>{{type[typeIndex].name}}</text>
					<image class="drop-icon" src="../../static/drop.svg" mode="aspectFit"></image>
				</view>
			</picker>
			<input v-model="storeName" @confirm="search()" class="search-input" type="text" placeholder="搜索商品名称" />
			<view class="search-button" @click="search()">
				<image class="search-icon" src="../../static/search.svg" mode="aspectFit"></image>
			</view>
		</view>
		<view class="right-typelist">
			<view class="right-typelist-in">
				<view class="right-typelist-item" v-for="(item, index) in type" :key="index" @click="typeIndex = index">
					<!-- <text class="type-button"
						:class="{'type-button-active': index == typeIndex}">{{item.name}}</text> -->
					<view class="type-button" :class="{'type-button-active': index == typeIndex}">
						<img :src="renderTextToImage(item.name, index == typeIndex ? '#fff' : '#333')" alt="" />
					</view>
				</view>
			</view>
		</view>
		<view class="main-list-box">
			<view class="main-list">
				<food v-for="(item, index) in foods" :key="index" :item="item" :popup="$refs['food-popup']" />
				<view class="food-empty" v-if="!foods.length">
					<image src="../../static/empty-data.svg" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<food-popup ref="food-popup" :cart="this" />
	</view>
</template>

<script>
	let first = true
	export default {
		data() {
			return {
				type: [{
					name: '全部'
				}],
				typeIndex: 0,
				pageNo: 1,
				pageSize: 10,
				loadOver: false,
				foods: [],
				storeName: '',
				cartList: [],
				cartSelectAllStatus: false,
				priceTotal: 0,
				submit: null
			}
		},
		watch: {
			storeName(val) {
				if (!val) this.reload()
			},
			typeIndex() {
				this.reload()
			}
		},
		onLoad() {
			this.category()
			this.getFoods()
			this.getCarts()
			let wait = setTimeout(() => {
				first = false
			}, 100)
		},
		onShow() {
			if (!first) {
				this.getCarts()
			}
		},
		onReachBottom() {
			this.pageNo++
			this.getFoods()
		},
		methods: {
			renderTextToImage(text, textColor) {
				let fontSize = 80
				const canvas = document.createElement('canvas')
				const ctx = canvas.getContext('2d')
				
				ctx.font = `${fontSize}px sans-serif`
				let textWidth = ctx.measureText(text).width

				let padding = 4
				canvas.width = textWidth + padding * 2
				canvas.height = fontSize + padding * 2

				ctx.fillStyle = 'transparent'
				ctx.fillRect(0, 0, canvas.width, canvas.height)

				ctx.fillStyle = textColor
				ctx.textBaseline = 'middle'
				ctx.textAlign = 'center'
				ctx.font = `${fontSize}px sans-serif`
				ctx.fillText(text, canvas.width / 2, canvas.height / 2 + 6)

				return canvas.toDataURL('image/png')
			},
			runPriceTotal() {
				this.priceTotal = 0
				for (let i in this.cartList) {
					if (this.cartList[i].selected) {
						this.priceTotal += this.cartList[i].price * this.cartList[i].cartNum
					}
				}
				this.priceTotal = Number(this.priceTotal.toFixed(2))
			},
			search() {
				if (!this.storeName) return
				this.reload()
			},
			reload() {
				this.pageNo = 1
				this.loadOver = false
				this.foods = []
				this.getFoods()
			},
			toPay() {
				if (!this.priceTotal) {
					uni.showToast({
						title: '你没有点餐或选中左侧清单中的任意餐品',
						icon: 'none'
					})
					return
				}
				this.runPriceTotal()
				uni.cartPage = this
				uni.navigateTo({
					url: './pay'
				})
			},
			category() {
				this.$api.category({
					shopId: uni.getStorageSync('info').shopId
				}).then(res => {
					let {
						data
					} = res.data
					data && this.type.push(...data)
				})
			},
			getFoods() {
				if (this.loadOver) return
				this.$api.page({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					storeName: this.storeName,
					cateId: this.type[this.typeIndex].id || '',
					shopId: uni.getStorageSync('info').shopId,
					isShow: 1
				}).then(res => {
					uni.hideLoading()
					let {
						data
					} = res.data
					if (data) {
						let {
							list,
							total
						} = data
						list && this.foods.push(...list)
						if (this.foods.length >= total) {
							this.loadOver = true
						}
					}
				})
			},
			getCarts() {
				this.$api.getCarts({
					shopId: uni.getStorageSync('info').shopId,
					cashierUserId: uni.getStorageSync('info').userId,
					// orderId: uni.getStorageSync('info').orderId
				}).then(res => {
					uni.hideLoading()
					let {
						data
					} = res.data
					if (data) {
						this.cartList = []
						this.cartList = data.map(item => {
							item.selected = true
							return item
						}) || []
						this.$nextTick(() => {
							this.runPriceTotal()
							this.cartSelectAllStatus = true
						})
					}
				})
			},
			cartSelectAll() {
				this.cartSelectAllStatus = !this.cartSelectAllStatus
				this.cartList.forEach(item => {
					item.selected = this.cartSelectAllStatus
				})
				this.runPriceTotal()
			},
			clearCart() {
				uni.showModal({
					title: '提示',
					content: '确定清空购物车？',
					success: res => {
						if (res.confirm) {
							this.$api.delCartAll({
								shopId: uni.getStorageSync('info').shopId,
								cashierUserId: uni.getStorageSync('info').userId
							}).then(res => {
								this.getCarts()
							})
						}
					}
				})
			},
			searchTypePickerChange(e) {
				this.typeIndex = e.detail.value
			}
		}
	}
</script>

<style>
	body {
		background: #f5f5f5;
	}

	.cart {
		--top-height: 353px;
		--left-width: 307px;
		--search-height: 58px;
		--right-width: 114px;
	}

	.top {
		position: fixed;
		z-index: 99;
		top: 0;
		left: 0;
		right: 0;
		height: var(--top-height);
		display: flex;
		flex-direction: column;
	}

	.banner {
		width: 100%;
		height: 300px;
		border-bottom-left-radius: 26px;
		border-bottom-right-radius: 26px;
	}

	.shop-name {
		flex: 1;
		display: flex;
		align-items: center;
		font-size: calc(var(--base) * 18);
		font-weight: bold;
		color: #333;
		padding: 0 18px;
		background: #f5f5f5;
	}

	.left {
		top: var(--top-height);
		width: var(--left-width);
		height: calc(100vh - var(--top-height) - 18px);
		background: #fff;
		position: fixed;
		top: var(--top-height);
		left: 18px;
		border-radius: 16px;
		display: flex;
		flex-direction: column;
	}

	.left-top {
		display: flex;
		flex-direction: row;
		height: 36px;
		font-size: calc(var(--base) * 14);
		color: #333;
	}

	.count-total {
		align-self: center;
		padding-left: 16px;
		flex: 1;
	}

	.count-total-number {
		color: #ff7700;
	}

	.select-all {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 12px;
	}

	.delete-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 12px;
	}

	.delete-box .icon {
		width: 18px;
		height: 18px;
	}

	.delete-box>text {
		padding-left: 6px;
	}

	.left-list {
		flex: 1;
		overflow: hidden auto;
	}

	.left-list-empty {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.left-list-empty image {
		--size: 180px;
		width: var(--size);
		height: var(--size);
	}

	.price-total {
		color: #f00;
		font-size: calc(var(--base) * 12);
		display: flex;
		align-items: center;
		align-self: flex-end;
		padding: 15px 16px;
		border-bottom: 1px solid #f7f7f7;
	}

	.price-total::before {
		content: '实付:';
		font-size: calc(var(--base) * 14);
		color: #333;
		padding-right: 12px;
	}

	.check {
		width: calc(100% - (20px * 2));
		height: 38px;
		border-radius: 19px;
		background: #1890ff;
		color: #fff;
		font-size: calc(var(--base) * 14);
		display: flex;
		align-items: center;
		justify-content: center;
		align-self: center;
		margin-bottom: 15px;
	}

	.search-bar {
		position: fixed;
		z-index: 99;
		top: var(--top-height);
		left: calc(var(--left-width) + 18px + 10px);
		width: calc(100vw - var(--left-width) - 18px - 10px - 14px);
		height: var(--search-height);
		background: #fff;
		border-radius: 16px;
		display: flex;
		flex-direction: row;
	}

	.search-type {
		min-width: 90px;
		padding: 0 6px;
	}

	.search-type-inner {
		height: var(--search-height);
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: calc(var(--base) * 20);
		font-weight: bold;
		color: #333;
	}

	.drop-icon {
		width: calc(var(--base) * 16);
		height: calc(var(--base) * 16);
		padding-left: 10px;
	}

	.uni-picker-container {
		font-size: calc(var(--base) * 20);
	}

	.search-input {
		height: 100%;
		font-size: calc(var(--base) * 18);
		padding: 0 14px;
		flex: 1;
	}

	.search-button {
		width: 92px;
		background: #1890ff;
		border-top-right-radius: 16px;
		border-bottom-right-radius: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.search-icon {
		width: calc(var(--base) * 28);
		height: calc(var(--base) * 28);
	}

	.right-typelist {
		position: fixed;
		--top: calc(var(--top-height) + var(--search-height) + 14px);
		top: var(--top);
		right: 14px;
		width: var(--right-width);
		height: calc(100vh - var(--top) - 20px);
		background: #fff;
		border-radius: 16px;
		overflow: hidden auto;
	}

	.right-typelist-in {
		padding: 0 15px 15px;
	}

	.right-typelist-item {
		padding-top: 15px;
		display: flex;
		flex-direction: column;
	}

	.type-button {
		display: flex;
		align-items: center;
		justify-content: center;
		/* font-size: calc(var(--base) * 16); */
		/* line-height: calc(var(--base) * 16); */
		height: calc(var(--base) * 16 + 8px * 2);
		border-radius: calc(var(--base) * 100);
		color: #333;
		/* padding: 8px 0; */
	}

	.type-button img {
		max-width: 90%;
		max-height: calc(var(--base) * 16);
	}

	.type-button-active {
		background: #1890ff;
		color: #fff;
		font-weight: bold;
	}

	.main-list-box {
		padding-top: calc(var(--top-height) + var(--search-height));
		padding-left: calc(var(--left-width) + 18px + 10px);
		padding-right: calc(var(--right-width) + 14px + 15px);
		padding-bottom: 18px;
	}

	.main-list {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.food-empty {
		width: 100%;
		height: 400px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.food-empty image {
		width: 60%;
	}
</style>